<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name = "viewport" content ="width=device-width, initial-scale=1.0">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<input id="file" type="file" onchange="fileChange" />
		<div id="box">

		</div>

		<script script type="text/javascript">
			//获取页面元素对象
			var file = document.getElementById('file');
			var output = document.getElementById('box');
			var progress = document.getElementById('progress');
			//onchange事件
			file.onchange = function(e) {
				console.log(e);
				var files = e.target.files;
				var file0 = files[0];
				console.log(file0.size, file0.name, file0.type);
				//fileReader对象
				var fileReader = new FileReader();
				var type = 'default';
				//判断文件类型
				if (/image/.test(file0.type)) {
					fileReader.readAsDataURL(file0);
					type = 'image';
				} else {
					fileReader.read
					fileReader.readAsText(file0, 'utf-8');
					type = 'text';
				}
				//文件加载出错
				fileReader.onerror = function() {
					output.innerHTML = '读取文件失败，错误码：' + fileReader.error.code;
				};
				//加载成功后
				fileReader.onload = function() {
					console.log('onload')
					var html = '';
					switch (type) {
						case 'text':
							html = fileReader.result;
							break;
					}
					//创建文档对象
					var parser = new DOMParser();
					var xmlDoc = parser.parseFromString(html, "text/xml");
					//提取数据 
					var xingming = xmlDoc.getElementsByTagName('XingMing');
					var xingbie = xmlDoc.getElementsByTagName('XingBie');

					var arr = '';
					arr += '姓名 ' + xingming[0].textContent + ' \n';
					arr += '性别 ' + xingbie[0].textContent + ' \n';

					console.log(arr);
					output.innerHTML = arr;
				};
				//进度条进度
				fileReader.onprogress = function(event) {
					if (event.lengthComputable) {
						progress.innerHTML = event.loaded + '/' + event.total;
					}
				}
			}
		</script>
	</body>
</html>
